<html xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/static/layui/dist/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<script>

</script>
<body>

<blockquote class="layui-elem-quote">
  本页面提供用户浏览和修改图表信息,用户可点击"查看"进行图表的查看、用户可点击"编辑"进行图表的编辑、用户可点击"删除"进行图表的删除.
{#  <a class="layui-btn layui-btn-normal" href="table.html" target="_blank">表格模块示例</a>#}
</blockquote>


{#<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">#}
{#  <legend>列边框表格</legend>#}
{#</fieldset>#}
<div class="layui-row layui-col-space2" >
<div class="layui-col-xs7 layui-col-sm7 layui-col-md7">
{#layui-col-md-offset1#}
{#<table class="layui-table" lay-even="" lay-skin="row">#}
{#  <colgroup>#}
{##}
{#    <col>#}
{#  </colgroup>#}
{#  <thead>#}
{#    <tr>#}
{#      <th>编号</th>#}
{#      <th>图表标题</th>#}
{#      <th>图表状态</th>#}
{#      <th>图表日志</th>#}
{#      <th>图表标签</th>#}
{#      <th>作者</th>#}
{#      <th>发布时间</th>#}
{#      <th>操作</th>#}
{##}
{#    </tr>#}
{#  </thead>#}
{#  <tbody>#}
{#  {% for allDatum in allData %}#}
{#      <tr>#}
{#          <td>{{ allDatum.chartid }}</td>#}
{#          <td>{{ allDatum.title }}</td>#}
{#          <td>{{ allDatum.chartjs }}</td>#}
{#          <td>{{ allDatum.chartscript }}</td>#}
{#          <td>{{ allDatum.chartstate }}</td>#}
{#          <td>{{ allDatum.charlog }}</td>#}
{#          <td>{{ allDatum.tag }}</td>#}
{##}
{#          <td>{{ allDatum.abstract }}</td>#}
{#          <td>{{ allDatum.author }}</td>#}
{#          <td>{{ allDatum.publictime }}</td>#}
{#          <td>{{ allDatum.chartdescription }}</td>#}
{#          <td lay-data="{fixed: 'left'}">#}
{#              <div class="layui-btn-group">#}
{#                  <button class="layui-btn layui-btn-sm">#}
{#                    <i class="layui-icon">&#xe642;</i>#}
{#                  </button>#}
{#                  <button class="layui-btn layui-btn-sm">#}
{#                    <i class="layui-icon">&#xe640;</i>#}
{#                  </button>#}
{##}
{#            </div>#}
{#          </td>#}
{#      </tr>#}
{#  {% endfor %}#}
{#  </tbody>#}
{#</table>#}

{#    <div class="layui-btn-group demoTable">#}
{#  <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>#}
{#  <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>#}
{#  <button class="layui-btn" data-type="isAll">验证是否全选</button>#}
{#</div>#}

<table class="layui-table" lay-data="{width: 980, height:470, url:'/return/admin/ChartDisplay/table/', page:true, id:'idTest'}" lay-filter="demo">
  <thead>
    <tr>
      <th lay-data="{field:'chartid', width:60,  fixed: true}">编号</th>
      <th lay-data="{field:'author', width:86,sort: true,edit:true}">作者</th>
      <th lay-data="{field:'title', width:188,edit:true}">图表标题</th>
      <th lay-data="{field:'publictime', sort: true,width:160}">发布时间</th>
      <th lay-data="{field:'tag', width:125,edit:true}">图表标签</th>
      <th lay-data="{field:'chartjs', width:80}">执行JS</th>
      <th lay-data="{field:'chartscript', width:90}">执行脚本</th>
      <th lay-data="{field:'abstract', width:135}">简介</th>
      <th lay-data="{field:'chartstate', width:80,  fixed: 'right',toolbar: '#select'}">可浏览</th>
      <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}">操作</th>
    </tr>
  </thead>
</table>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" href="/return/admin/ChartDisplay/table/?key=form&chartid={% verbatim %}{{ d.chartid }}{% endverbatim %}">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit" href="/return/admin/ChartDisplay/table/?key=form&chartid={% verbatim %}{{ d.chartid }}{% endverbatim %}">查看</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="select">
<div class="layui-form-item">
    {% verbatim %}
      {{#  if(d.chartstate == 1){ }}
        <input type="checkbox" checked="" name={{ d.chartid }} lay-skin="switch" lay-filter="switchTest" lay-text="开|关">
      {{#  } else { }}
        <input type="checkbox"  name={{ d.chartid }} lay-skin="switch" lay-filter="switchTest" lay-text="开|关">
      {{#  } }}
    {% endverbatim %}
</div>
</script>


  </div>
    <div class="layui-col-xs5 layui-col-sm5 layui-col-md5" >
      <div style="height: 470px;border: 2px solid #e2e2e2;" id="main_demo"></div>
{#        <div style="height: 30%;background-color: #00aa00"><input type="button" id="changeChart" value="3"></div>#}
    </div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>数据图表</legend>
</fieldset>
    <hr class="layui-bg-green" style="height: 5px">
{% include 'admin/displayForm.html' %}
</div>

<script src="/static/layui/dist/layui.js" charset="utf-8"></script>
<script src="/static/js/echarts.min.js"></script>
<script type="text/javascript" src="/static/js/map/js/china.js"></script>
<script src="/static/js/jquery-1.8.3.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
layui.use(['table','form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,table = layui.table
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;

  //日期
  laydate.render({
    elem: '#publicTime'
  });
  laydate.render({
    elem: '#publicTime'
  });

  //创建一个编辑器
  var editIndex = layedit.build('LAY_demo_editor');

  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [/(.+){6,12}$/, '密码必须6到12位']
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });

  //监听指定开关
  form.on('switch(switchTest)', function(obj){
    chname = this.name;
    ch = obj.elem.checked ? '1' : '0';
    showtip = obj.elem.checked ? '可浏览' : '不可浏览';
    changeSwitch(chname,ch);
    layer.tips('您将id为'+this.name+'设置为:'+ showtip, obj.othis)
  });

  //监听指定开关
  //form.on('switch(switchTest)', function(obj){
   // layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
  //});

  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });

    //监听表格复选框选择
  table.on('checkbox(demo)', function(obj){
    console.log(obj)
  });
  //监听工具条
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
{#        layer.alert('编辑行：<br>'+ JSON.stringify(data));#}
{#      layer.msg('ID：'+ data.chartid + ' 的查看操作');#}
    } else if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
{#        inData(data);#}
{#        form.render('select', 'test2');#}
{#        layer.alert('编辑行：<br>'+ JSON.stringify(data))#}
    }
  });

  var $ = layui.$, active = {
    getCheckData: function(){ //获取选中数据
      var checkStatus = table.checkStatus('idTest')
      ,data = checkStatus.data;
      layer.alert(JSON.stringify(data));
    }
    ,getCheckLength: function(){ //获取选中数目
      var checkStatus = table.checkStatus('idTest')
      ,data = checkStatus.data;
      layer.msg('选中了：'+ data.length + ' 个');
    }
    ,isAll: function(){ //验证是否全选
      var checkStatus = table.checkStatus('idTest');
      layer.msg(checkStatus.isAll ? '全选': '未全选')
    }
  };

  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

});
 function changeSwitch(name , ch) {
     $.get("/return/admin/ChartDisplay/table/?key=changeSwitch&chartid="+ ch +'&name='+name,function () {})
 }
</script>

<script>
         var Message = {{ Message|safe }};
         var Page = {{ page|safe }};
</script>
<script id="chartJS" type="text/javascript" src="/static/showData_{{ formData.chartid }}.js"></script>


</body>
</html>